<style>
    .newsSec_txt {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .pagination {
        /*display: inline-block;*/
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<!--  / warpper  -->
<main class="warpper">

    {notempty name="$news"}
    <div class="newsSec">
        <ul class="newsSec_list">
            {foreach $news as $row}
            <li>
                <a href="{:url('index/index/newsdetail')}?id={$row.id}">
                    <div class="newsSec_img">
                        <div class="newsSec_imgBox"
                             style="background: url(__CDN__{$row.image}) center top/cover no-repeat;"></div>
                    </div>
                    <div class="newsSec_txt">
                        <p>{$row.title}</p>
                        <h6>{$row.date}</h6>
                    </div>
                </a>
            </li>
            {/foreach}
        </ul>

        {$news->render()}
    </div>
    {/notempty}

</main>
<!--  / warpper  -->
<script>
    $(function () {


    })

    $(window).ready(function () {
        $('.headerNav:first-child li').eq(3).addClass('on');
    })
    $(window).load(function () {
        if ($(window).width() <= 768) {
            var h = $(window).scrollTop()

            for (var i = 0; i < $('.newsSec_list li').length; i++) {
                if (h > $('.newsSec_list li').eq(i).offset().top - $(window).height() / 1) {
                    $('.newsSec_list li').eq(i).addClass('on');
                }
            }
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


        for (var i = 0; i < $('.newsSec_list li').length; i++) {
            if (h > $('.newsSec_list li').eq(i).offset().top - $(window).height() / 1) {
                $('.newsSec_list li').eq(i).addClass('on');
            }
        }


    })

</script>